<ul class="nav metro-nav-list bs-docs-sidenav">
<!-- Metro Components -->
   <li>
      <a href="#metro-components" class="nav-header">Advanced Components</a>
   </li>
   <li>
      <a href="#page-components">Page components</a>
      <ul class="nav">
         <li><a href="#type-components-page-header">Page header</a></li>
         <li><a href="#type-components-metro-page-header1">Page header with back button</a></li>
         <li><a href="#type-components-metro-page-header2">Page header subtitle &amp; back button</a></li>
         <li><a href="#type-components-metro-page-header3">Page header with back button &amp; nav menu</a></li>
         <li><a href="#type-components-hero">Hero</a></li>
      </ul>
   </li>

   <li>
      <a href="#metro-appbar">Application Bar</a>
      <ul class="nav">
         <li><a href="#metro-appbar-default">Default style</a></li>
         <li><a href="#metro-appbar-dark">Dark style</a></li>
      </ul>
   </li>
   <li><a href="#metro-pivot">Pivot</a></li>
   <li>
      <a href="#metro-listview">ListView</a>
      <ul class="nav">
         <li><a href="#metro-listview-grid">Grid layout</a></li>
         <li><a href="#metro-listview-list">List layout</a></li>
         <li><a href="#metro-listview-alt">Alternatives</a></li>
      </ul>
   </li>
   <li>
      <a href="#metro-tiles">Tiles</a>
      <ul class="nav">
         <li>
            <a href="#metro-tiles-square">Square templates</a>
            <ul class="nav">
               <li><a href="#metro-tiles-square-textonly">Text Only Tiles</a></li>
               <li><a href="#metro-tiles-square-imageonly">Image Only Tiles</a></li>
               <li><a href="#metro-tiles-square-squarepeek">Square peek templates</a></li>
            </ul>
         </li>
         <li>
            <a href="#metro-tiles-wide">Wide templates</a>
            <ul class="nav">
               <li><a href="#metro-tiles-wide-textonly">Text Only Tiles</a></li>
               <li><a href="#metro-tiles-wide-imageonly">Image Only Tiles</a></li>
               <li><a href="#metro-tiles-wide-imagetext">Image &amp; text templates</a></li>
            </ul>
         </li>
         <li>
            <a href="#metro-tiles-widepeek">Widepeek templates</a>
            <!--<ul class="nav">-->
               <!--<li><a href="#metro-tiles-wide-textonly">Text Only Tiles</a></li>-->
               <!--<li><a href="#metro-tiles-wide-imageonly">Image Only Tiles</a></li>-->
               <!--<li><a href="#metro-tiles-wide-imagetext">Image &amp; text templates</a></li>-->
            <!--</ul>-->
         </li>
         <li>
            <a href="#metro-tiles-select">Tiles selection</a>
         </li>
         <li>
            <a href="#metro-tiles-colors">Color alternatives</a>
         </li>
      </ul>
   </li>

</ul>
